<template>
	<div style="background:white">
		<el-row type="flex"  justify="space-around" >
			<el-col :span="11"  class="grid-content">
				<el-row type="flex" justify="center" style="margin-top:30px">
					<el-col :span="4">
						<img src="../../../public/img/宿舍信息管理.png" style="width:70px;height:70px">
					</el-col>
					<el-col :span="4">						
						<div style="font-weight:bold">
							<p>房间总数</p>
							<span>{{roomNumber}}间</span>
						</div>
					</el-col>
				</el-row>
			</el-col>
			<el-col :span="11"  class="grid-content">				
				<el-row type="flex" justify="center">
					<el-col :span="5">
						<img src="../../../public/img/学生信息管理.png" style="width:130px;height:130px">
					</el-col>
					<el-col :span="4">						
						<div style="font-weight:bold;margin-top:40px">
							<p>居住总数</p>
							<span>{{allNumber}}人</span>
						</div>
					</el-col>
				</el-row>
			</el-col>			
		</el-row>
	
		<div class="content">
			<el-button class="elButton" style="border:none;">水 电 状 态</el-button>	
			<el-switch			
			style="display: block;"
			v-model="value"
			inactive-color="#ff4949"
			active-color="#ff4949"
			active-text="用 电 状 态"
			inactive-text="用 水 状 态">
			</el-switch>
			<el-input type="text" v-model="searchValue" placeholder="请输入想要搜索的内容" style="width:240px"></el-input>
			<el-button class="elButton" type="primary" @click="search(e)">查询</el-button>
		</div>
			
		<div class="content">
			<el-card shadow="hover" class="box-card grid-content"  v-for="item in electricityFilter" :key="item" style="display:flex;justify-content:space-around">
				<div v-if="value==true">					 
					<div style="display: flex;"	>
						<div>
							<p>宿舍号：{{item.room }}</p>
							<p>电费余额：{{item.cost_num }}</p>
							<p>本月用电：{{item.room_dian }}kWh</p>					
						</div>	
						<p><img class="dian" src="../../../public/img/dian.png" alt=""></p>								
					</div>
				</div>
				<div v-else>
					<div v-for="item in waterFilter" :key="item" style="display:flex;justify-content:space-around;margin: 10px" >	
						<div>
							<p>学号：{{ item.studentcard }}</p>
							<p>水费余额：{{ item.cost_num }}</p>
							<p>本月用水：{{ item.room_dian }}t</p>					
						</div>	
						<p><img class="water" src="../../../public/img/water.png" alt=""></p>								
					</div>
				</div>
			</el-card>
		</div>
	</div>
</template>
<script setup name="work">
 import{ ref,onMounted } from "vue"
 import { getRoomNumber, getCost } from "@/api/admin/home";
 import {ElMessage} from 'element-plus'

 const value=ref(true)
 const roomNumber = ref(0)  //总共房间数
 const allNumber = ref(0)   //总共人数
 let searchValue = ref("")   
 let water = ref([])  //水费
 let electricity = ref([])   //电费
 let waterFilter = ref([])  //过滤的水费
 let electricityFilter = ref([])   //过滤的电费
 onMounted(() => {
	getRoom()
	Cost()
 })

 
//  获取房间信息
 const getRoom = async () => {
	const res = await getRoomNumber()
	
	if(res.data.code === 200){
		 roomNumber.value = res.data.data.length
		 allNumber.value = res.data.data.reduce((pre, cur) => {
			return  Number(pre) +  Number(cur.room_num)
		},0)		
	} else {
		ElNotification({
                message: "获取信息失败 ",
                type: "error",
                duration: 3000
        });
	}
 }

// 获取水电信息
// 0:水费
// 1:电费
function uniqueByProperty(arr, propertyName) {  
    const seen = new Set();  
    return arr.filter(item => {  
        const val = item[propertyName];  
        if (!seen.has(val)) {  
            seen.add(val);  
            return true;  
        }  
        return false;  
    });  
}  
const Cost = async  () => {
	const res = await getCost()
	if (res.data.code === 200) {	

		 water.value = res.data.data.filter((item) => { return item.cost_type == 0})
		 waterFilter.value =  uniqueByProperty(water.value,'username')
		 electricity.value = res.data.data.filter((item) => { return item.cost_type == 1});
		 electricityFilter.value =  uniqueByProperty(water.value,'username')
		//  electricityFilter.value = electricity.value;
		 console.log(waterFilter.value,electricityFilter.value)
	} else {
            ElNotification({
                message: "获取信息失败 ",
                type: "error",
                duration: 3000
            });
    }
}

// 搜索框
const search = async ()=>{		
	if (searchValue.value) {
			waterFilter.value = water.value.filter((item) => { return item.studentcard==searchValue.value })
			electricityFilter.value = electricity.value.filter((item) => { return item.room==searchValue.value})
		}else{
			waterFilter.value = water.value
			electricityFilter.value = electricity.value
		}	
 }
 
</script>

<style scoped lang="scss">
.grid-content {
    border-radius: 14px;
	background-color:rgb(238,238,238)
  }
.content{
	display:flex;
	justify-content: space-around;
	margin-top: 20px;
}
.elButton{
	font-family:'黑体';font-size:20px
}
.box-card {
    width: 300px;
	margin-bottom: 20px;
  }
.dian{
	width:20px;
	height:50px
}
.water{
	width:50px;
	height:50px
}


::v-deep .el-switch__core {
	width: 100px;
	height:24px;
		
}
::v-deep .el-switch__label *{
	font-size: 20px ;	
	font-family:'黑体'
}
</style>